{% from 'macros/icon.njk' import icon with context %}
{% from 'macros/card-authors.njk' import cardAuthors with context %}

{% macro featuredPostCard(post) %}
{% set pd = post.data %}
<div class="masonry-grid__item featured-card hairline rounded-lg width-full">
  <div class="card-title-bar color-blue-medium">
    {{ icon('blog', {hidden: true}) }}
    <span class="gap-left-300 flex-1 user-select-none">
      {{ 'i18n.nav.side_nav.blog' | i18n(locale) }}
    </span>
    {# <div class="card-title-bar__controls">
      {{ icon('keyboard-arrow-left') }}
      {{ icon('keyboard-arrow-right') }}
    </div> #}
  </div>

  {% if pd.hero %}
    <div class="featured-card__thumbnail gap-top-400">
      <a class="display-block" href="{{ post.url }}" {% if not pd.alt %}aria-hidden="true" tabindex="-1"{% endif %}>
        {% Img
          class="rounded-100 object-fit-cover width-full",
          src=pd.hero,
          alt=pd.alt,
          width="278",
          height="156",
          sizes="(min-width: 592px) 391px, calc(100vw - 82px)"
        %}
      </a>
    </div>
  {% endif %}

  <h2 class="type--h3-card gap-top-300">
    <a class="color-text surface display-inline-flex" href="{{ post.url }}">
      {{ pd.title }}
    </a>
  </h2>

  <p class="type--caption gap-top-200">
    {{ pd.description }}
  </p>

  {% if pd.authors and pd.authors.length %}
    <div class="gap-top-400">
      {{ cardAuthors(pd.authors, pd.date) }}
    </div>
  {% endif %}

  <div class="gap-top-400">
    <a href="/blog" class="material-button button-text display-inline-flex color-primary">
      {{ 'i18n.common.see_all_articles' | i18n(locale) }}
    </a>
  </div>
</div>
{% endmacro %}
